import React from 'react';
import { Button, Space, Steps, Card, Typography, Modal } from "antd";
import { getOrderLogisticsDetail, expressageCompanySettingList } from '@/request/storeBackManage/fundsManage/billList';
import { getDateTime2 } from '@/utils/getDate'
import Logistics from "../../../../orderManagement/MallOrder/logistics";
import StockOutModal from "../../../../orderManagement/MallOrder/stockOutModal";
import SelfLogistics from "../../../../orderManagement/MallOrder/selfLogistics";
const { Step } = Steps;
const { Paragraph } = Typography;

export default class OrderStep extends React.Component {
  constructor(props) {
    super(props)
    this.stockOutModalRef = React.createRef()
    this.logisticsRef = React.createRef()
    this.selfLogisticsRef = React.createRef()
    this.state = {
      orderInfo: props.orderInfo, //数据信息
      currentValue: '', //当前进度值
      stepParams: [], //step 文案
      logisticsModal: false,
      options: [],//快递公司
      courierCode: '', //快递公司名称
      courierNo: '',//快递单号
      logisticsInformation: [],//物流信息
    }
  }
  async componentDidMount() {
    await this.getData()
    await this.getExpressage()
  }
  getExpressage = async () => {
    let res = await expressageCompanySettingList();
    if (res.code === 0 && res.data) {
      let options = res.data.map((v) => {
        return {
          value: v.expressageCompanyCode,
          label: v.expressageCompanyName,
        };
      });
      this.setState({ options });
    }
  };
  // 数据处理
  getData = async () => {
    let { orderInfo } = this.state
    if (orderInfo) {
      // 订单类型
      let activityTypeCode = ''
      switch (orderInfo.activityTypeCode) {
        case 0:
          activityTypeCode = "普通订单"
          break;
        case 2:
          activityTypeCode = "拼团订单"
          break;
        case 1:
          activityTypeCode = "砍价订单"
          break;
        case 3:
          activityTypeCode = "奖品订单"
          break;
      }
      // 订单类型
      let commissionStatus = ''
      console.log();
      switch (orderInfo.commissionStatus) {
        case 1:
          commissionStatus = "已结算"
          break;
        case 0:
          commissionStatus = "未结算"
          break;
        default:
          commissionStatus = ""
      }
      orderInfo.commissionStatus = commissionStatus
      orderInfo.activityTypeCode = activityTypeCode
      orderInfo.orderState !== '0' ? this.getFinishStep(orderInfo) : this.getOffStep(orderInfo)
    }
  }
  // step交易完成进度数据处理
  getFinishStep = (params) => {
    if (params.orderState !== '0') {
      let step = ''
      switch (params.orderState) {
        case '3':
          step = 0
          break
        case '4':
          step = 1
          break
        case '5':
          step = 2
          break
        case '6':
          step = 3
          break
        case '9':
          step = 4
          break
      }
      console.log(step);
      this.setState({
        currentValue: step,
        stepParams: [
          {
            title: '生成订单',
            description: params.createTime,
          },
          {
            title: '已付款',
            description: params.payTime,
          },
          {
            title: '已发货',
            description: params.orderState === '5' ? <Space direction='vertical'>
              <span>{params.goodsGoTime}</span>
              <Button onClick={() => { this.logisticsDetail(params) }}>查看物流</Button>
            </Space> : params.goodsGoTime
          },
          {
            title: '交易完成',
            description: params.orderState === '9' ? <Space direction='vertical'>
              <span>{params.finishTime}</span>
              <Button onClick={() => { this.logisticsDetail(params) }}>查看物流</Button>
            </Space> : params.finishTime
          },
        ]
      })
    }
  }
  // step交易关闭进度数据处理
  getOffStep = (params) => {
    let stepCurrent = ''
    let stepValue = []
    if (params.orderState === '0') {
      switch (params.beforeEndOrderState) {
        case '3':
          stepCurrent = 1
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '交易关闭',
              description: params.orderEndTime,
            }
          ]
          break
        case '4':
          stepCurrent = 2
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '交易关闭',
              description: params.orderEndTime,
            }
          ]
          break
        case '5':
          stepCurrent = 3
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '已发货',
              description: params.goodsGoTime,
            },
            {
              title: '交易关闭',
              description: (
                <Space direction='vertical'>
                  <span>{params.orderEndTime}</span>
                  <Button onClick={() => this.setState({ logisticsModal: true })}>查看物流</Button>
                </Space>
              ),
            }
          ]
          break
        case '9':
          stepCurrent = 4
          stepValue = [
            {
              title: '生成订单',
              description: params.createTime,
            },
            {
              title: '已付款',
              description: params.payTime,
            },
            {
              title: '已发货',
              description: params.goodsGoTime,
            },
            {
              title: '交易完成',
              description: params.finishTime,
            },
            {
              title: '交易关闭',
              description: (
                <Space direction='vertical'>
                  <span>{params.orderEndTime}</span>
                  <Button onClick={() => this.setState({ logisticsModal: true })}>查看物流</Button>
                </Space>
              ),
            }
          ]
          break
      }
      this.setState({
        currentValue: stepCurrent,
        stepParams: stepValue
      })
    }
  }
  //物流信息
  logisticsDetail = async (value) => {
    // isMultiPackage是否为多包裹 true：多包裹 false: 单包裹
    let isMultiPackage = value.outLibraryCount > 1;
    if (isMultiPackage) {
      this.stockOutModalRef.current.open(value.shopOrderId)
    } else {
      if (value.deliveryCode) {
        this.selfLogisticsRef.current.openModal(value.shopOrderId, value.oneOutLibraryCode)
      } else {
        this.logisticsRef.current.onLogistics(value.shopOrderId, value.oneOutLibraryCode)
      }
    }
    // await getOrderLogisticsDetail({
    //   orderId: values.shopOrderId,
    //   code: values.oneOutLibraryCode
    // }).then(res => {
    //   if (res.code === 0 && res.data) {
    //     let context = null
    //     if (res.data.msg) {
    //       context = res.data.msg.hasOwnProperty('context') ? res.data.msg.context.map(v => {
    //         let time = v.time * 1000
    //         time = new Date(parseInt(time))
    //         time = getDateTime2(time)
    //         return {
    //           ...v,
    //           time
    //         }
    //       }) : null
    //     }
    //     let courierCode = ""
    //     for (let i = 0; i < this.state.options.length; i++) {
    //       if (this.state.options[i].value === res.data.courierCode) {
    //         courierCode = this.state.options[i].label
    //       }
    //     }
    //     this.setState({
    //       logisticsModal: true,
    //       logisticsInformation: context,
    //       courierCode,
    //       courierNo: res.data.courierNo
    //     })
    //   }
    // })
  }

  render() {
    const { orderInfo, currentValue, stepParams, logisticsModal, logisticsInformation, courierCode, courierNo } = this.state
    return (
      <div>
        <Logistics ref={this.logisticsRef}/>
        <SelfLogistics ref={this.selfLogisticsRef}/>
        <StockOutModal
            history={this.props.history}
            ref={this.stockOutModalRef}
        />
        <Paragraph>
          <blockquote>
            <Space size={30}>
              <span>订单号：{orderInfo.orderCode}</span>
              <span>下单时间：{orderInfo.createTime}</span>
              <span>{orderInfo.activityTypeCode}</span>
              <span style={{ color: 'red' }}>{orderInfo.commissionStatus}</span>
            </Space>
          </blockquote>
        </Paragraph>
        <Card>
          <Steps
            progressDot
            current={currentValue}
          >
            {stepParams.map((item, index) => {
              return <Step title={item.title} subTitle={item.description} key={index} />
            })}
          </Steps>
        </Card>
        <Modal
          title={"跟踪物流"}
          visible={logisticsModal}
          onCancel={() => this.setState({ logisticsModal: false })}
          onOk={() => this.setState({ logisticsModal: false })}
          cancelButtonProps={{ style: { display: "none" } }}
        >
          <p>快递公司：{courierCode}</p>
          <p>快递单号：{courierNo}</p>
          {
            logisticsInformation ? <Steps progressDot current={currentValue} direction="vertical">
              {logisticsInformation.map((v, i) => {
                return <Step title={v.time} description={v.desc} key={i} />
              })}
            </Steps> : <p>暂无物流信息</p>
          }


        </Modal>
      </div >
    )
  }
}
